// component/order-echarts-2/index.ts
import * as echarts from "../ec-canvas/echarts";
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Array,
      value: [],
    },
  },
  observers: {
    data: function (newVal) {
      this.initEcharts(newVal);
      //   console.log("图表数据", newVal, this.data.ec);
      //   this.setData({
      //     list: newVal,
      //     ec: {
      //       onInit: function (canvas, width, height, dpr) {
      //         const initChart = echarts.init(canvas, null, {
      //           width: width,
      //           height: height,
      //           devicePixelRatio: dpr,
      //         });
      //         initChart.setOption(
      //           {
      //             title: {
      //               text: "工单统计(楼栋)",
      //               left: 0,
      //               top: 0,
      //             },
      //             tooltip: {
      //               trigger: "axis",
      //             },
      //             grid: {
      //               top: "60px",
      //               left: "10px",
      //               right: "0px",
      //               bottom: "70px",
      //               // height: '170',
      //               // top: 100,
      //               // left:'5%',
      //               containLabel: true,
      //             },
      //             xAxis: {
      //               data: newVal.map((item) => item.address),
      //               axisLabel: {
      //                 show: true,
      //                 formatter: function (value) {
      //                   // 设定最大长度
      //                   var maxLength = 4; // 最大长度，超过则显示省略号
      //                   // 检查是否需要截断
      //                   if (value.length > maxLength) {
      //                     // 截断并添加省略号
      //                     return (
      //                       value.substring(0, maxLength).split("").join("\n") +
      //                       "\n" +
      //                       "..."
      //                     );
      //                   } else {
      //                     // 不需要截断时，直接换行显示完整文本
      //                     return value.split("").join("\n");
      //                   }
      //                 },
      //               },
      //             },
      //             yAxis: [
      //               {
      //                 name: "工单数量",
      //                 position: "left",
      //                 axisLine: {
      //                   show: true,
      //                   lineStyle: {
      //                     // color: "#fff",
      //                   },
      //                 },
      //                 splitLine: { show: false },
      //               },
      //             ],
      //             series: [
      //               {
      //                 type: "bar",
      //                 barMaxWidth: "10",
      //                 barMinWidth: "5",
      //                 data: newVal.map((item) => item.count),
      //                 label: {
      //                   show: true, // 显示标签
      //                   position: "top", // 标签的位置，这里是在柱子顶部
      //                   formatter: "{c}", // 标签内容格式器，{c} 表示数据值
      //                 },
      //               },
      //             ],
      //           },
      //           true
      //         );
      //         canvas.setChart(initChart);
      //         return initChart;
      //       },
      //     },
      //   });
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true,
    },
    chartInstance: null,
    list: [],
  },
  /**
   * 组件的方法列表
   */
  methods: {
    initEcharts(newVal) {
      this.lineComponent = this.selectComponent("#mychart-dom");
      this.lineComponent.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr,
        });
        chart.setOption({
          title: {
            text: "工单统计(楼栋)",
            left: 0,
            top: 0,
          },
          legend: {
            icon: "rect",
            right: "center",
            top: 40,
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
              color: "#333",
            },
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            top: "80px",
            left: "0px",
            right: "0px",
            bottom: "70px",
            height: '170',
            // top: 100,
            // left:'5%',
            containLabel: true,
          },
          xAxis: {
            data: newVal.map((item) => item.address),
            axisLabel: {
              show: true,
              formatter: function (value) {
                // 设定最大长度
                var maxLength = 4; // 最大长度，超过则显示省略号
                // 检查是否需要截断
                if (value.length > maxLength) {
                  // 截断并添加省略号
                  return (
                    value.substring(0, maxLength).split("").join("\n") +
                    "\n" +
                    "..."
                  );
                } else {
                  // 不需要截断时，直接换行显示完整文本
                  return value.split("").join("\n");
                }
              },
            },
          },
          yAxis: [
            {
              name: "工单数量",
              position: "left",
              axisLine: {
                show: true,
                lineStyle: {
                  // color: "#fff",
                },
              },
              splitLine: { show: false },
            },
          ],
          series: [
            {
              name: "已完成",
              type: "bar",
              stack: "工单",
              barMaxWidth: "10",
              barMinWidth: "5",
              data: newVal.map((item) => item.finished),
              // label: {
              //   show: true, // 显示标签
              //   position: "top", // 标签的位置，这里是在柱子顶部
              //   formatter: "{c}", // 标签内容格式器，{c} 表示数据值
              // },
            },
            {
              name: "未完成",
              type: "bar",
              stack: "工单",
              barMaxWidth: "10",
              barMinWidth: "5",
              data: newVal.map((item) => item.unfinished),
              // label: {
              //   show: true, // 显示标签
              //   position: "top", // 标签的位置，这里是在柱子顶部
              //   formatter: "{c}", // 标签内容格式器，{c} 表示数据值
              // },
            },
          ],
        });
        return chart;
      });
    },
  },
  //小程序声明周期
  lifetimes: {
    attached: async function () {
      // 在组件实例进入页面节点树时执行
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
});
